<template>
	<view class="login">
		<view class="introduction">
			Hi，欢迎！
			<!-- 来到<text class="mark">舒博</text> -->
		</view>
		<view class="logo">
			<image src="/static/logo.png"></image>
		</view>
		<view class="toggle-box" :style="{ '--offset-left': triangleOffset + 'px' }" v-if="currentAction === 'login'">
			<view v-for="i of loginOptions" :key="i.code" :class="['toggle-item', loginWay === i.code && 'checked']" @click="setLoginWay(i.code)">
				{{ i.name }}
			</view>
			<view class="triangle"></view>
		</view>
		<view class="form-box">
			<view class="form-label">
				<image class="label-icon" src="/static/login/phone.png" />
				手机号
			</view>
			<view class="form-input">
				<input v-model="phoneNumber" class="input-box" type="number" maxlength="11" placeholder="请输入手机号" />
			</view>
			<template v-if="loginWay === 'captcha' || currentAction === 'forgotten'">
				<view class="form-label">
					<image class="label-icon" src="/static/login/security.png" />
					验证码
				</view>
				<view class="form-input">
					<input v-model="captcha" class="input-box" type="number" maxlength="6" placeholder="请输入验证码" />
					<view class="captcha" @click="getSMSCaptcha">{{ captchaText }}</view>
				</view>
			</template>
			<template v-if="loginWay === 'password' || currentAction === 'forgotten'">
				<view class="form-label">
					<image class="label-icon" src="/static/login/lock.png" />
					{{ currentAction === 'login' ? '密码' : '设置新密码' }}
				</view>
				<view class="form-input">
					<input v-model="password" class="input-box" type="password" maxlength="11" :placeholder="currentAction === 'login' ? '请输入密码' : '请输入新密码'" />
				</view>
			</template>
			<template v-if="currentAction === 'login'">
				<button :loading="loadStore.loading.post" class="btn-primary btn-confirm" @click="handleLogin(phoneNumber, captcha)">登录</button>
				<view class="forgotten" @click="currentAction = 'forgotten'">忘记密码</view>
			</template>
			<template v-else>
				<button class="btn-primary btn-confirm" @click="handleForgotten">确认</button>
				<view class="forgotten" @click="currentAction = 'login'">账号登录</view>
			</template>
		</view>
		<view class="tourist-mode">
			<view class="title">使用其他方式</view>
			<view class="click-label" @click="toHome">
				<image class="other-icon" src="/static/login/tourist.png" />
				<view class="hint">游客模式</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onReady } from '@dcloudio/uni-app';
import { useLogin } from './useLogin';
import { useSMSCaptcha } from '@/hooks/useSMSCaptcha';
import { useLoadStore } from '@/store/loading';

const loadStore = useLoadStore();
const { phoneNumber, captcha, captchaText, getSMSCaptcha } = useSMSCaptcha();
const { currentAction, loginOptions, loginWay, password, triangleOffset, setLoginWay, getTriangleOffset, handleLogin } = useLogin();

onReady(getTriangleOffset);

/**
 * 忘记密码
 */
function handleForgotten() {}

function toHome() {
	uni.switchTab({
		url: '/pages/home/index'
	});
}
</script>

<style scoped lang="scss">
.login {
	min-height: 100vh;
	background-image: url('/static/login/bg.png');
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #f9faff;
	position: relative;
	display: flex;
	flex-direction: column;
	.logo {
		height: 80rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;
		image {
			width: 80rpx;
		}
	}
	.introduction {
		padding: 200rpx 50rpx 50rpx;
		color: #333;
		font-size: 50rpx;
		font-weight: bold;
		.mark {
			background-image: linear-gradient(0deg, #4771f6, #ffffff);
			background-size: 100% 24rpx;
			background-position: bottom;
			background-repeat: no-repeat;
		}
	}
	.toggle-box {
		display: flex;
		justify-content: space-evenly;
		padding-bottom: 60rpx;
		position: relative;
		overflow: hidden;
		.toggle-item {
			color: #333;
			font-size: 34rpx;
			&.checked {
				font-weight: bold;
			}
		}
		.triangle {
			position: absolute;
			bottom: 0;
			left: var(--offset-left);
			width: 120rpx;
			height: 120rpx;
			border-radius: 14rpx;
			background-color: #fff;
			transform: translate(-50%, 85%) rotate(45deg);
			transition: left 300ms;
		}
	}
	.form-box {
		flex: 1;
		border-top-left-radius: 80rpx;
		border-top-right-radius: 80rpx;
		background-color: #ffffff;
		padding: 60rpx 50rpx 244rpx;
		.form-label {
			color: #333;
			font-size: 34rpx;
			display: flex;
			column-gap: 8rpx;
			align-items: center;
			.label-icon {
				width: 36rpx;
				height: 36rpx;
			}
		}
		.form-input {
			height: 88rpx;
			margin-top: 30rpx;
			margin-bottom: 50rpx;
			padding-left: 44rpx;
			padding-right: 44rpx;
			border-radius: 8rpx;
			background-color: #eee;
			display: flex;
			align-items: center;
			.input-box {
				flex: 1;
			}
			.captcha {
				color: #4771f6;
				font-size: 28rpx;
				line-height: 26rpx;
				padding-left: 30rpx;
				border-left: 2rpx solid #4771f6;
			}
		}
		.forgotten {
			color: #4771f6;
			font-size: 26rpx;
			width: max-content;
			margin: 40rpx auto;
			text-decoration: underline;
			text-underline-offset: 4rpx;
		}
		.btn-confirm {
			margin-top: 70rpx;
		}
	}
	.tourist-mode {
		text-align: center;
		padding-bottom: 70rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		.title {
			font-size: 26rpx;
			color: #b1b1b1;
			display: flex;
			align-items: center;
			justify-content: center;
			column-gap: 20rpx;
			&::before {
				content: '';
				display: block;
				background-color: #b1b1b1;
				width: 100rpx;
				height: 2rpx;
			}
			&::after {
				content: '';
				display: block;
				background-color: #b1b1b1;
				width: 100rpx;
				height: 2rpx;
			}
		}
		.click-label {
			padding-top: 30rpx;
			display: inline-block;
		}
		.other-icon {
			width: 70rpx;
			height: 70rpx;
		}
		.hint {
			font-size: 24rpx;
			color: #333;
		}
	}
}
</style>
